<template>
	<div>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-left-nav mui-pull-left callback-his" @click="goBack()"></a>
			<h1 class="mui-title">帮助中心</h1>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view mui-grid-view mui-grid-9 hani-app-help">
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<router-link :to="{name:'HelpClass',params:{ data : BANK,title:'银行开户' },query:{type:'BANK'}}">
						<span class="mui-icon mui-icon-bank"></span>
						<div class="mui-media-body">银行开户</div>
					</router-link>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<router-link :to="{name:'HelpClass',params:{ data : INSURE,title:'投保须知' },query:{type:'INSURE'}}">
						<span class="mui-icon mui-icon-toubao"></span>
						<div class="mui-media-body">投保须知</div>
					</router-link>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<router-link :to="{name:'HelpClass',params:{ data : CLAIM,title:'理赔须知' },query:{type:'CLAIM'}}">
						<span class="mui-icon mui-icon-lipei"></span>
						<div class="mui-media-body">理赔须知</div>
					</router-link>
				</li>
			</ul>
			<div class="list-title">
				<div class="title-box">常见问题</div>
				<ul class="mui-table-view">
					<template v-for="(item,$index) in help_list">
						<li class="mui-table-view-cell">
							<router-link :to="{name:'HelpInfo',params:{data:item}}" class="mui-navigate-right">
								{{item.title}}
							</router-link>
						</li>
					</template>
					
				</ul>
				
			</div>
		</div>
	</div>
</template>
<script>
	import {api} from '../../../gloabl/api.js'
	
	export default{
		data:function(){
			return{
				help_list:{},
				BANK:[],
				INSURE:[],
				CLAIM:[],
			}
		},
		
		mounted:function(){
			mui.showLoading("正在加载..","div");//遮罩层
			let vm = this;
			let query = '{'+api.helpListApi()+'}';
			vm.$http.post(url.graphql,{query:query})
			.then(function(res){
				mui.hideLoading();
				vm.help_list = res.data.data.allFaqs;
				let data = res.data.data.allFaqs;
				for (let item of data) {
					if(item.category == 'BANK'){ //银行
						vm.BANK.push(item)
					}
					if(item.category == 'INSURE'){ //投保
						vm.INSURE.push(item)
					}
					if(item.category == 'CLAIM'){ //理赔
						vm.CLAIM.push(item)
					}
				}
			}).catch(function (error) {
				mui.alert('请求超时')
			})
		}
	}
</script>
<style scoped="scoped">
	.title-box{
		margin: 15px 0;
		padding: 0 15px;
		font-size: 16px;
		font-weight: 600;
	}
	.list-title{
		background-color: #FFFFFF;
		border-bottom: 1px solid #ECECEC;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.mui-content>.hani-app-help:first-child{
		margin: 0;
		background-color: #FFFFFF;
	}
	.mui-icon-bank{
		vertical-align: middle;
		margin-right: 10px;
		width: 24px;
		height: 24px;
		background-image: url(../../../assets/images/help/help-ios-account.png);
		background-size: 100% 100%;
		margin: auto;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.mui-icon-toubao{
		vertical-align: middle;
		margin-right: 10px;
		width: 24px;
		height: 24px;
		background-image: url(../../../assets/images/help/help-ios-nodes.png);
		background-size: 100% 100%;
		margin: auto;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.mui-icon-lipei{
		vertical-align: middle;
		margin-right: 10px;
		width: 24px;
		height: 24px;
		background-image: url(../../../assets/images/help/help-ios-claims.png);
		background-size: 100% 100%;
		margin: auto;
		margin-top: 10px;
		margin-bottom: 10px;
	}
</style>